<template>
	<view class="animated fadeIn faster">
		<view class="status-bar-height"></view>
		<view class="py-3" style="height: 50rpx;"></view>
		<view class="position-fixed top-0 left-0 right-0">
			<view class="status-bar-height"></view>
			<view class="px-2 py-3" style="height: 50rpx;">
				<view class="d-flex d-flex-middle d-flex-between">
					<view class="w-150rpx" @click="goUrl">
						<text class="iconfont icon-31fanhui1 font32 color000"></text>
					</view>
					<text class="font32 color333">添加商务信息</text>
					<view class="w-150rpx"></view>
				</view>
			</view>
		</view>
		
		<view class="p-2">
			<view class="d-flex d-flex-between d-flex-middle mb-4">
				<text class="font30 color000">你的姓名</text>
				<view class="input-box d-flex-item px-2 d-flex d-flex-middle d-flex-between">
					<input v-model="name" placeholder="请输入您的姓名" placeholder-class="colorhold" />
					<!-- <view v-if="form.name" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorccc" @click="()=>form.name=''"></text></view> -->
				</view>
			</view>
			<view class="d-flex d-flex-middle mb-4">
				<text class="font30 color000">性别所属</text>
				<view style="margin-left: 26rpx;">
					<radio-group @change="handleGenderChange" class="d-flex d-flex-middle">
					    <label class="mr-5 d-flex d-flex-middle">
					        <radio value="male" color="#FF5816" style="transform: scale(.8);" :checked="gender === 'male'"></radio> 男
					    </label>
					    <label class="d-flex d-flex-middle">
					        <radio value="female" color="#FF5816" style="transform: scale(.8);" :checked="gender === 'female'"></radio> 女
					    </label>
					</radio-group>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-4">
				<text class="font30 color000">所属公司</text>
				<view class="input-box d-flex-item px-2 d-flex d-flex-middle d-flex-between">
					<input placeholder="请输入您的公司名称" placeholder-class="colorhold" />
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-4">
				<text class="font30 color000">商务属性</text>
				<view class="input-box d-flex-item px-2 d-flex d-flex-middle d-flex-between">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name" class="d-flex-item">
						<text>{{array[index].name}}</text>
					</picker>
					<text class="iconfont icon-xiala2"></text>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-4" @click="openPicker">
				<text class="font30 color000">所属地区</text>
				<view class="input-box d-flex-item px-2 d-flex d-flex-middle d-flex-between">
					<text :class="form.address?'':'colorhold'">{{form.address?form.address:'请选择所属地区'}}</text>
					<text class="iconfont icon-xiala2"></text>
				</view>
			</view>
			<view class="d-flex d-flex-between mb-4 d-flex-top">
				<view style="height: 66rpx;" class="d-flex d-flex-middle"><text class="font30 color000">所属行业</text></view>
				<view class="d-flex-item d-flex d-flex-wrap" style="padding-left: 8rpx;">
					<!-- <view class="category cate-on d-flex d-flex-center d-flex-middle"><text>焊割器材</text></view> -->
					<view class="category d-flex d-flex-center d-flex-middle" v-for="(hr,hindex) in hrList" :class="{'cate-on':hindex == hrIndex}" :key="hr.id" @click="changeHr(hindex)"><text>{{hr.name}}</text></view>
				</view>
			</view>
			<view class="d-flex d-flex-between mb-4">
				<view class="pt-2">
					<text class="font30 color000">上传图片</text>
				</view>
				<view class="d-flex-item" style="padding-left: 26rpx;">
					<uni-file-picker limit="6" :source-type="['album', 'camera']"></uni-file-picker>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle mb-4">
				<text class="font30 color000">业务签名</text>
				<view class="input-box d-flex-item px-2 d-flex d-flex-middle d-flex-between">
					<input placeholder="请输入业务签名" placeholder-class="colorhold" />
				</view>
			</view>
		</view>
		
		<view class="px-3">
			<view class="bottom-btn d-flex d-flex-center d-flex-middle bg-main mb-3" @click="confirm"><text class="colorfff font32">提交</text></view>
			<view class="bottom-btn d-flex d-flex-center d-flex-middle bg-f7" @click="goUrl"><text class="color222 font32">跳过</text></view>
		</view>
		<my-city-picker :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity" @hideShow="onhideShow"></my-city-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateIndex:0,
				name:'',
				company:'',
				gender: 'male',
				show: false,
				province: "湖北省",
				city: "武汉市",
				area: "洪山区",
				areaCode: "420111",
				form:{
					address:''
				},
				array: [{name:'采购经理'},{name: '技术总监'}, {name:'业务经理'}, {name:'销售总监'}],
				index: 0,
				hrIndex:0,
				hrList:[
					{
						id:'1',
						name:'焊割器材'
					},{
						id:'2',
						name:'五金机电'
					},{
						id:'3',
						name:'鞋帽服饰'
					},{
						id:'4',
						name:'休闲娱乐'
					},{
						id:'5',
						name:'皮具箱包'
					},{
						id:'6',
						name:'金融保险'
					}
				]
			}
		},
		methods: {
			handleGenderChange(){
				this.gender = event.detail.value;
			},
			openPicker() {
				this.show = true
			},
			changeClick(value, value2, value3, value4) {
				this.province = value;
				this.city = value2;
				this.area = value3;
				this.areaCode = value4;
			},
			onhideShow() {
			    this.show = false
			},
			onsetCity(e) {
				let data = e.detail.target.dataset;
				console.log('e',e)
				let address = data.province + '-' + data.city + '-' + data.area;
				this.show = false
			    this.form.address = address
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value
			},
			changeHr(index){
				this.hrIndex = index
			},
			confirm(){
				let that = this
				if(that.name == ''){
					return uni.showToast({
						title:'请输入你的姓名！',
						icon:'none'
					})
				}
				uni.navigateTo({
					url:'/pages/fee/fee'
				})
			},
			goUrl(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped>
.colorhold{font-size: 16px;}
.input-box{
	border: 1px solid #EAEAEA;
	border-radius: 4rpx;
	height: 86rpx;
	margin-left: 26rpx
}
.category{
	border: 1px solid #EAEAEA;
	border-radius: 4rpx;
	width: 172rpx;
	height: 66rpx;
	color: #010101;
	margin-left: 18rpx;
	margin-bottom: 10rpx;
}
.cate-on{
	border-color: #FF5816;
	color: #FF5816;
}
.bottom-btn{
	height: 94rpx;
	width: 690rpx;
	border-radius: 50rpx;
}
</style>
